<template>
  <div class="container">
    <el-card class="box-card">
      <div class="search-box">
        <label class="gjz wdgjz">关键字</label
        ><el-input
          placeholder="根据文章标题搜索"
          class="input-box"
          v-model.trim="sousu.keyword"
        ></el-input>
        <label class="gjz">状态</label>
        <el-select class="input-box" v-model="sousu.state" placeholder="请选择">
          <el-option label="已禁用" value="0"></el-option>
          <el-option label="已启用" value="1"></el-option>
        </el-select>
        <el-button size="mini" class="annu qc" @click="qc">清除</el-button>
        <el-button size="mini" class="annu" type="primary" @click="ss">搜索</el-button>
        <el-button size="mini" class="annu xzjq el-icon-edit" type="success" @click="openDialog"
          >新增技巧</el-button
        >
      </div>
      <div class="sjzl el-icon-info">
        <span class="sljj">数据一共{{ counts }} 条</span>
      </div>
      <!-- 表格 -->
      <el-table :data="items" style="width: 100%">
        <el-table-column type="index" label="序号" width="70%"> </el-table-column>
        <el-table-column label="文字标题" width="400%">
          <template #default="{ row }">
            {{ row.title }}
            <i class="el-icon-film" v-if="row.videoURL" @click="yingying"></i>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数" width="150%"> </el-table-column>
        <el-table-column prop="username" label="录入人" width="200%"> </el-table-column>
        <el-table-column label="录入时间" width="300%">
          <template #default="{ row }">
            {{ formatDate(row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column label="状态" width="120">
          <template #default="{ row }">
            {{ formatEmployment(row.state) }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="text" size="small" @click="yulanlist(row.id)">预览</el-button>
            <el-button type="text" size="small" @click="handCilck(row)">{{
              jyqy(row.state)
            }}</el-button>
            <el-button type="text" size="small" :disabled="row.state === 0" @click="xg(row.id)"
              >修改</el-button
            >
            <el-button type="text" size="small" :disabled="row.state === 0" @click="sc(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :current-page="+query.page"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="+query.pagesize"
        layout="sizes, prev, pager, next, jumper"
        :total="counts"
      >
      </el-pagination>
    </el-card>
    <!-- 弹框 -->
    <el-dialog :visible="dialogVisible" width="70%" @close="closeDialog">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="文章正文" prop="articleBody" ref="questionRef">
          <quill-editor
          ref="myQuillEditor"
            v-model.trim="form.articleBody"
            @blur="changeArticleBody"
          >
          </quill-editor>
        </el-form-item>
        <el-form-item label="视频地址" prop="videoURL" class="spdz">
          <el-input v-model="form.videoURL"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 预览 -->
    <el-dialog :visible="yulan" title="预览文章" width="70%" @close="yulan = false">
      <div class="biaoti">{{ form.title }}</div>
      <i class="xiaobiaoti">{{ formatDate(form.createTime) }}</i
      ><i class="xiaobiaoti">超级管理员</i><i class="xiaobiaoti el-icon-view">{{ form.visits }}</i>
      <el-card class="boxx-card">
        <div>
          <span v-html="form.articleBody"></span>
        </div>
      </el-card>
    </el-dialog>
    <!-- 遮罩层 -->
    <div class="mask"></div>
    <span class="close" @click="yc">X</span>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { list, changeState, add, detail, update, remove } from '@/api/hmmm/articles.js'
export default {
  name: 'ArtList',
  data() {
    return {
      sousu: {
        keyword: null,
        state: null
      },
      counts: 0, // 总记录数
      pages: 0, // 总页数
      items: [], // 列表
      dialogVisible: false,
      yulan: false,
      form: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      rules: {
        title: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
        articleBody: [{ required: true, message: '请输入任务描述', trigger: 'blur' }]
      },
      query: {
        page: 0,
        pagesize: 0
      },
      // 文章状态
      wzzt: {
        id: '',
        state: ''
      }
    }
  },
  mounted() {
    this.List()
  },
  methods: {
    handleCurrentChange(page) {
      // newPage是当前点击的页码
      this.query.page = page // 将当前页码赋值给当前的最新页码
      this.List()
    },
    // 获取列表
    async List() {
      const { data: res } = await list(this.query)
      // const { data: res } = await list()
      //  console.log(res)
      this.counts = res.counts
      this.query.pagesize = +res.pagesize
      this.pages = res.pages
      this.query.page = +res.page
      this.items = res.items
    },
    // 时间初始化
    formatDate(value, str = 'YYYY-MM-DD HH:mm:ss') {
      return dayjs(value).format(str)
    },
    // 格式化状态函数
    formatEmployment(type) {
      const map = {
        1: '已启用',
        0: '已禁用'
      }
      return map[type]
    },
    jyqy(type) {
      const map = {
        0: '启用',
        1: '禁用'
      }
      return map[type]
    },
    openDialog() {
      this.dialogVisible = true
    },
    closeDialog() {
      this.dialogVisible = false
      this.$refs.form.resetFields()
       this.form= {
        title: '',
        articleBody: '',
        videoURL: ''
      }
    },
    // 文章状态
    async handCilck(row) {
      this.wzzt.id = row.id
      this.wzzt.state = row.state === 1 ? 0 : 1
      await changeState(this.wzzt)
      this.List()
    },
    // 确定
    confirm() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          if (this.form.id) {
            await update(this.form)
            this.$message.success('修改成功')
          } else {
            await add(this.form)
            this.$message.success('添加成功')
          }
          this.closeDialog()

          this.List()
        } else {
          this.$message.error('任务名称或者任务描述有误')

        }
      })
    },
    // 编辑
    async xg(id) {
      const data = { id }
      this.dialogVisible = true
      const res = await detail(data)
      // console.log(res)
      this.form = res.data
    },
    // 删除
    async sc(id) {
      const data = { id }
      await remove(data)
      this.$message.success('删除成功')
      this.List()
    },
    // 预览
    async yulanlist(id) {
      const data = { id }
      this.yulan = true
      const res = await detail(data)
      // console.log(res)
      this.form = res.data
      this.form.articleBody.substring('>', '<')
    },
    // 搜索
    async ss() {
      const { data: res } = await list({ ...this.query, ...this.sousu })
      // const { data: res } = await list()
      this.counts = res.counts
      this.query.pagesize = +res.pagesize
      this.pages = res.pages
      this.query.page = +res.page
      this.items = res.items
    },
    qc() {
      this.sousu = {}
      this.query = {}
      this.List()
    },
    yingying() {
      const mask = document.querySelector('.mask')
      const close = document.querySelector('.close')
      mask.style.display = 'block'
      close.style.display = 'block'
    },
    yc() {
      let mask = document.querySelector('.mask')
      let close = document.querySelector('.close')
      mask.style.display = 'none'
      close.style.display = 'none'
    },
    // 富文本框校验
    changeArticleBody() {
      if (this.form.articleBody.trim() === '') {
        this.$refs.form.validateField('articleBody')
      } else {
        this.$refs.questionRef.clearValidate() // clearValidate()取消验证方法
      }
    },
  }
}
</script>

<style scoped lang="less">
.close {
  display: block;
  position: fixed;
  top: 150px;
  right: 50%;
  width: 50px;
  height: 50px;
  background-color: #666;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  color: white;
  z-index: 1000;
  display: none;
}
.mask {
  width: 100%;
  height: 1200px;
  background: gray;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  opacity: 0.6;
  display: none;
}
.masks {
  width: 100px;
  height: 100px;
  background-color: #000;
  color: #fff;
}
.el-icon-film {
  color: blue;
}
.boxx-card {
  background: #f5f5f5;
}
.biaoti {
  font-size: 24px;
  margin-left: 10px;
}
.xiaobiaoti {
  margin-left: 12px;
  padding-top: 15px;
}
.box-card {
  margin: 10px 7px;
}
.search-box {
  display: flex;
  align-items: center;
}
.annu {
  height: 37px;
}
.gjz {
  width: 126px;
  font-size: 14px;
  margin-left: 30px;
}
.wdgjz {
  margin-right: 13px;
}
.input-box {
  width: 20%;
  margin-left: -80px;
}
.qc {
  margin-left: 15px;
}
.xzjq {
  margin-left: 450px;
}
.sjzl {
  display: flex;
  font-size: 13px;
  color: #909399;
  background-color: #f4f4f5;
  padding: 8px 16px;
  margin: 15px 0;
  border-radius: 5px;
}
.sljj {
  margin-left: 7px;
}

/deep/ .ql-editor {
  height: 200px;
}

.spdz {
  margin-top: 40px;
}
/deep/ .el-dialog__headerbtn {
  top: 9px;
}
</style>
